<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>17_自定义指令和ng-transclude</title>
    <script src="../lib/angularjs.js"></script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
    <cus-directive an="123">
        cus-directive的内容
        <cus-b></cus-b>
        <cus-a></cus-a>
    </cus-directive>
</body>
<script>
    const myApp = angular.module("myApp", [])
    myApp.directive("cusA", function () {
        return {
            template: "<span>指令cusA</span>",
            replace: true
        }
    })
    myApp.directive("cusB", function () {
        return {
            template: "<span>指令cusB</span>",
            replace: true
        }
    })
    myApp.directive("cusDirective", function () {
        return {
            restrict: "EA",
            replace: true,

            // transclude为布尔值的用法
            transclude: true,
            template: function (ele, attr) {
                console.log("element：", ele, "attribute：", attr);
                return "<h1>自定义指令 <span>这里是h1的内部：</span><span ng-transclude></span></h1>"
            },


            // transclude为对象的用法
            // transclude: {
            //     "a": "cusA",
            //     "b": "cusB"
            // }
            // templateUrl: "17_cusDirective.html",
        }
    })
    myApp.controller("myCtrl", ["$scope", function ($scope) {
    }])
</script>

</html>